import { useGSAP } from '@gsap/react';
import React from 'react';
import gsap from 'gsap';
import { SplitText } from 'gsap/all';


const About = () => {
    useGSAP(() => {
        const titleSplit = SplitText.create('#about h2', {
            type: 'words'
        })

        const subtitleSplit = new SplitText(".sub-content > p", { type: "lines" });

        const scrollTimeline = gsap.timeline({
            scrollTrigger: {
                trigger: "#about",
                start: "top center"
            }
        })

        scrollTimeline.from(titleSplit.words, {
            opacity: 0,
            duration: 1,
            xPercent: -100,
            ease: "expo.out",
            stagger: 0.02
        }).from(subtitleSplit.lines, {
            opacity: 0,
            xPercent: 100,
            duration: 1,
            ease: "expo.out",
            stagger: 0.02,
            // delay: 0.2
        }, '<').from('.top-grid div, .bottom-grid div', {
            opacity: 0,
            duration: 2,
            ease: "power1.inout",
            stagger: 0.04
        }, 
        // 前一个动画结束前0.5s 开始下一个动画 会让动画整体更流畅
        '-=0.5')
    })
  return (
    <div id="about">
      <div className="mb-16 md:px-0 px-5">
        <div className='content px-10'>
            <div className='md:col-span-8'>
                <p className='badge'>Best Cocktails</p>
                <h2>Where every detail matters—from muddle to garnish</h2>
            </div>
            <div className='sub-content'>
                <p>Every cocktail we serve is a reflection of our obsession with detail — from the first muddle to the final garnish. That care is what turns a simple drink into something truly memorable. </p>
                <div>
                    <p className='md:text-3xl text-xl font-bold'>
                        <span>4.5</span>/5
                    </p>
                    <p className='text-sm text-white'>
                        More than +12000 customers
                    </p>
                </div>
            </div>
        </div>
      </div>
      <div className='top-grid px-10'>
        <div className='md:col-span-3'>
            <div className=''></div>
            <img src="/images/abt1.png" alt="grid-img-1" />
        </div>

        <div className='md:col-span-3'>
            <div className=''></div>
            <img src="/images/abt6.png" alt="grid-img-6" />
        </div>

        <div className='md:col-span-6'>
            <div className='noisy'></div>
            <img src="/images/abt2.png" alt="grid-img-2" />
        </div>
      </div>

      <div className='bottom-grid px-10'>
        <div className='md:col-span-7'>
            <div className=''></div>
            <img src="/images/abt3.png" alt="grid-img-3" />
        </div>

        <div className='md:col-span-5'>
            <div className=''></div>
            <img src="/images/abt4.png" alt="grid-img-4" />
        </div>
      </div>
    </div>
  );
};
export default About;